<template>
  <div
      class="container"
      :style="{
        top: y + '%',
        left: x + '%',
        width: width + '%',
        height: height + '%',
        opacity: visible ?  1 : 0,
        }"
  >

    <!--    选项div-->
    <img :src="backImg" style="width: 100%;height: 100%;">

    <div style="width: 100%; text-align: center;">
      <p class="end-top">达成结局</p>
      <p class="end-title" :style="{color: titleColor}">{{ endingtitle }}</p>
      <p class="end-desc">{{ endingdesc }}</p>
      <p class="end-tip">点击右下角“故事线“可选择其它剧情</p>
    </div>

  </div>
</template>
<script>

export default {
  computed: {
    backImg() {
      console.log('结局类型：', this.endingtype)
      if (this.endingtype == 1) {
        //普通结局
        return "https://comps.videohudong.com/ivimg/DB9F57A2BF7B936B24B335D975071D0EAC46C4451BE57AD1C158201196B19734.jpeg"
      } else if (this.endingtype == 2) {
        //死亡结局
        return "https://comps.videohudong.com/ivimg/1594BD02FADE2302EE355EDA69F2B32C0C5AC3E103C6BF1746D4CCAD2FFF6804.jpeg"
      } else {
        return "https://comps.videohudong.com/ivimg/5D3C843EC591A80AE7C45BC514E92281AB38C3E3BA47CCF5D729262D581951F0.jpeg"
      }
    },
    titleColor(){
      if (this.endingtype == 1) {
        //普通结局
        return '#99343C'
      } else if (this.endingtype == 2) {
        //死亡结局
        return '#3A3A3A'
      } else {
        return '#FFFFFF'
      }
    }
  },
  mounted() {
    this.bridge.on('player', 'timeupdate', time => {
      if (time >= this.startTime) {
        this.show();
      } else {
        this.hide();
      }
    });
  },
};
</script>
<style>
.container {
  position: absolute;
  transition: opacity 1s ease;
}

.end-top {
  width: 100%;
  font-weight: bold;
  font-size: 1rem;
  color: #303030;
  line-height: 10%;
  margin-top: 15%
}

.end-title {
  width: 100%;
  font-weight: bold;
  font-size: 1.8rem;
  margin-top: 20%;
}


.end-desc {
  width: 100%;
  font-size: 0.5rem;
  color: #3A3A3A;
  margin-top: 35%;
}

.end-tip {
  width: 100%;
  margin-top: 46%;
  font-size: 0.3rem;
  color: #3A3A3A;
}

img {
  z-index: 1;
  position: absolute;
}

p {
  z-index: 2;
  position: absolute;
  text-align: center;
}


</style>
